<template>
  <div class="wp-box">
    <!-- 标定 -->
    <div class="check-1">
      <!-- <el-checkbox v-model="checked">车辆坐标系统标定</el-checkbox> -->
      <p class="check-tit">车辆坐标系统标定</p>
      <p class="check-p">坐标原点设置</p>
      <el-checkbox-group v-model="checkedCities" @change="spot" :max="1">
        <el-checkbox
          class="portraitBox"
          v-for="city in cities"
          :label="city"
          :key="city"
          >{{ city }}</el-checkbox
        >
      </el-checkbox-group>
      <p class="check-p">坐标偏差量设置（±1cm）</p>
      <div class="coordinateList">
        <div class="inp-left">X</div>
        <div>
          <!-- <input type="number" class="inp" v-model="CalibrationConfig.Position[0]" oninput="if(value>1)value=0;if(value<-1)value=0"/> -->
          <el-input class="inp" type="number" v-model="CalibrationConfig.Position[0]" oninput="if(value>1)value=1;if(value<-1)value=-1"></el-input>
        </div>
      </div>
      <div class="coordinateList">
        <div class="inp-left">Y</div>
        <div>
          <!-- <input type="number" class="inp"  v-model="CalibrationConfig.Position[1]" oninput="if(value>1)value=0;if(value<-1)value=0"/> -->
          <el-input class="inp" type="number" v-model="CalibrationConfig.Position[1]" oninput="if(value>1)value=1;if(value<-1)value=-1"></el-input>
        </div>
      </div>
      <div class="coordinateList">
        <div class="inp-left">Z</div>
        <div>
          <!-- <input type="number" class="inp"  v-model="CalibrationConfig.Position[2]" oninput="if(value>1)value=0;if(value<-1)value=0"/> -->
          <el-input class="inp" type="number" v-model="CalibrationConfig.Position[2]" oninput="if(value>1)value=1;if(value<-1)value=-1"></el-input>
        </div>
      </div>
    </div>

    <div class="footerBox">
      <!-- <el-checkbox v-model="checkedTwo">传感器姿态标定</el-checkbox> -->
      <p class="check-tit">传感器姿态标定</p>
      <p class="check-p">偏差量设置（±3º）</p>
      <div class="coordinateList">
        <div class="inp-left">俯仰角</div>
        <div>
          <!-- <input type="number" class="inpTwo" v-model="CalibrationConfig.Angle[0]" oninput="if(value>3.0)value=0;if(value<-3.0)value=0"/> -->
          <el-input type="number" class="inpTwo" v-model="CalibrationConfig.Angle[0]" oninput="if(value>3.0)value=3;if(value<-3.0)value=-3"></el-input>
        </div>
      </div>
      <div class="coordinateList">
        <div class="inp-left">航向角</div>
        <div>
          <!-- <input type="number" class="inpTwo" v-model="CalibrationConfig.Angle[1]" oninput="if(value>3)value=0;if(value<-3)value=0"/> -->
          <el-input type="number" class="inpTwo" v-model="CalibrationConfig.Angle[1]" oninput="if(value>3.0)value=3;if(value<-3.0)value=-3"></el-input>

        </div>
      </div>
      <div class="coordinateList">
        <div class="inp-left">横滚角</div>
        <div>
          <!-- <input type="number" class="inpTwo" v-model="CalibrationConfig.Angle[2]" oninput="if(value>3)value=0;if(value<-3)value=0"/> -->
          <el-input type="number" class="inpTwo" v-model="CalibrationConfig.Angle[2]" oninput="if(value>3.0)value=3;if(value<-3.0)value=-3"></el-input>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "",
  components: {},
  data() {
    return {
      checked: false,
      checkedTwo: false,
      checkedCities: ["前轴中心"],
      cities: ["前轴中心", "后轴中心"],
      CalibrationConfig: {
        AxisCenter: 0,
        Position: [0,0,0],
        Angle: [0,0,0],
      },
    };
  },
  created(){
    this.CalibrationConfig = JSON.parse(sessionStorage.getItem("CalibrationList")) || {AxisCenter:0, Position: [0,0,0],Angle: [0,0,0]};
    if (this.CalibrationConfig.AxisCenter == 1 ) {
      this.checkedCities = ['后轴中心']
    }
  },
  methods: {
    spot(data) {
      if (data[0] == "前轴中心") {
        this.CalibrationConfig.AxisCenter = 0;
      } else if (data[0] == "后轴中心") {
        this.CalibrationConfig.AxisCenter = 1;
      } else if (data[0] == undefined) {
        this.CalibrationConfig.AxisCenter = -1;
      }
    },
    // 数据回传
    Sub() {
      this.$emit("ok", this.CalibrationConfig);
    },
  },
});
</script>
  
<style lang="less" scoped>
/deep/.el-checkbox__label {
  font-size: 18px;
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #1b1b1d;
}
.check-1 {
  margin-left: 20px;
  margin-top: 30px;
}
.check-tit {
  color: #1b1b1d;
  margin-bottom: 8px;
  font-size: 18px;
}
.check-p {
  color: #1b1b1d;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 18px;
}
.portraitBox {
  height: 32px;
  padding-left: 26px;
  padding-right: 80px;
}
.coordinateList {
  display: flex;
  line-height: 40px;
  font-size: 18px;
  margin-left: 25px;
}
.inp {
  width: 200px;
  height: 40px;
  // border: 1px solid #c0c2cd;
  outline: none;
  margin-left: 10px;
  // padding-left: 20px;
  margin-bottom: 10px;
}
/deep/.el-input__inner{
  width: 200px;
  border: 1px solid #c0c2cd;

}
.footerBox {
  padding-left: 20px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid #f0f1f5;
}
.inpTwo {
  width: 180px;
  height: 40px;
  // border: 1px solid #c0c2cd;
  // outline: none;
  margin-left: 10px;
  // padding-left: 20px;
  margin-bottom: 10px;
}
</style>